<template>
  <div class="app-layout">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>大明湖旅游系统</h2>
        <p>
          <span class="role-icon">
            <svg v-if="userRole === 'admin'" class="admin-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm3.5 12.09l-1.41 1.41L12 13.42 9.91 15.5 8.5 14.09 10.59 12 8.5 9.91 9.91 8.5 12 10.59l2.09-2.09 1.41 1.41L13.42 12l2.08 2.09z"
                fill="currentColor" />
            </svg>
            <svg v-else class="tourist-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"
                fill="currentColor" />
            </svg>
          </span>
          {{ userRole === 'admin' ? '管理员' : '游客' }}模式
        </p>
      </div>
      <div class="sidebar-content">
        <div class="user-info">
          <!-- 替换原有的el-avatar为自定义SVG头像 -->
          <div class="custom-avatar"
            :class="{ 'admin-avatar': userRole === 'admin', 'tourist-avatar': userRole !== 'admin' }">
            <svg v-if="userRole === 'admin'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
                fill="currentColor" />
            </svg>
            <svg v-else viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
                fill="currentColor" />
            </svg>
          </div>
          <div class="user-details">
            <h3>{{ username }}</h3>
            <p>
              <span class="role-icon small">
                <svg v-if="userRole === 'admin'" class="admin-icon" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm3.5 12.09l-1.41 1.41L12 13.42 9.91 15.5 8.5 14.09 10.59 12 8.5 9.91 9.91 8.5 12 10.59l2.09-2.09 1.41 1.41L13.42 12l2.08 2.09z"
                    fill="currentColor" />
                </svg>
                <svg v-else class="tourist-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"
                    fill="currentColor" />
                </svg>
              </span>
              {{ userRole === 'admin' ? '系统管理员' : '游客用户' }}
            </p>
          </div>
        </div>

        <!-- 导航菜单 -->
        <div class="nav-menu">
          <h3 class="nav-title">功能导航</h3>

          <!-- 管理员导航菜单 -->
          <el-menu v-if="userRole === 'admin'" class="sidebar-menu" :default-active="activeMenu" router>
            <el-menu-item index="/admin/home">
              <el-icon>
                <Location />
              </el-icon>
              <span>景点管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/statistics">
              <el-icon>
                <DataAnalysis />
              </el-icon>
              <span>数据统计</span>
            </el-menu-item>
          </el-menu>

          <!-- 游客导航菜单 -->
          <el-menu v-else class="sidebar-menu" :default-active="activeMenu" router>
            <el-menu-item index="/visitor/home">
              <el-icon>
                <LocationInformation />
              </el-icon>
              <span>景点浏览</span>
            </el-menu-item>
            <el-menu-item index="/visitor/Comment">
              <el-icon>
                <LocationInformation />
              </el-icon>
              <span>景点评论</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="sidebar-footer">
        <el-button type="danger" @click="handleLogout" class="logout-button">
          <el-icon>
            <SwitchButton />
          </el-icon>
          退出登录
        </el-button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="main-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { SwitchButton, Location, DataAnalysis, User, Setting, LocationInformation, Star, Timer } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 获取用户信息
const username = computed(() => userStore.username || '未知用户')
const userRole = computed(() => userStore.userRole)

// 当前活动菜单
const activeMenu = computed(() => route.path)

// 处理退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout()
    router.push('/')
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style scoped>
.app-layout {
  display: flex;
  height: 100vh;
  width: 100%;
}

.sidebar {
  width: 250px;
  background-color: #304156;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.sidebar-header p {
  margin: 5px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.sidebar-content {
  flex: 1;
  padding: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-details {
  margin-left: 15px;
}

.user-details h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.user-details p {
  margin: 5px 0 0;
  font-size: 12px;
  opacity: 0.8;
}

/* 导航菜单样式 */
.nav-menu {
  margin-top: 10px;
}

.nav-title {
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0;
  padding-left: 5px;
  color: rgba(255, 255, 255, 0.7);
}

.sidebar-menu {
  border-right: none;
  background-color: transparent;
}

.sidebar-menu :deep(.el-menu-item) {
  height: 40px;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.7);
  margin: 4px 0;
  border-radius: 4px;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-menu :deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-menu :deep(.el-icon) {
  color: inherit;
  margin-right: 5px;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-button {
  width: 100%;
}

.main-content {
  flex: 1;
  overflow: auto;
  background-color: #f5f7fa;
}

.role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  vertical-align: middle;
}

.role-icon svg {
  width: 18px;
  height: 18px;
}

.role-icon.small svg {
  width: 14px;
  height: 14px;
}

.admin-icon {
  color: #ffd700; /* 金色 */
}

.tourist-icon {
  color: #87ceeb; /* 天蓝色 */
}

/* 自定义头像样式 */
.custom-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.custom-avatar svg {
  width: 40px;
  height: 40px;
}

.admin-avatar {
  background-color: rgba(255, 215, 0, 0.2); /* 淡金色背景 */
}

.admin-avatar svg {
  color: #ffd700; /* 金色 */
}

.tourist-avatar {
  background-color: rgba(135, 206, 235, 0.2); /* 淡蓝色背景 */
}

.tourist-avatar svg {
  color: #87ceeb; /* 天蓝色 */
}
</style>
